<template>
    <view>
        <z-paging
            ref="paging"
            v-model="dataList"
            :refresher-out-rate="0.8"
            auto-scroll-to-top-when-reload
            safe-area-inset-bottom
            @query="queryList"
            :auto-clean-list-when-reload="false"
            :auto-scroll-to-top-when-reload="false"
            empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
            empty-view-text="暂无内容"
            :refresher-status.sync="refresherStatus"
        >
            <view class="scrollViews">
                <view>
                    <view class="flex_wrap fileBox"
                        ><u-icon
                            label="添加"
                            size="28rpx"
                            name="plus"
                            color="#777"
                            labelColor="#777"
                            @click="show1 = true"
                        ></u-icon
                    ></view>
                    <u-checkbox-group v-model="checked" placement="column">
                        <view
                            class="item flex_wrap flex_column"
                            v-for="(item, index) in dataList"
                            :key="item.id"
                        >
                            <view>
                                <view class="topMessage flex_wrap row_between">
                                    <u-checkbox
                                        :name="item.id"
                                        shape="circle"
                                        :key="item.id"
                                    />
                                    <view
                                        class="flex_wrap row_middle flex-wrap"
                                    >
                                        <u-image
                                            :src="MissingAvatar"
                                            width="100rpx"
                                            height="100rpx"
                                            bgColor="#eee"
                                            shape="circle"
                                        />
                                        <view class="flex_wrap flex_column">
                                            <view style="margin-left: 20rpx">
                                                <view
                                                    class="flex_wrap flex-center"
                                                >
                                                    <text
                                                        style="
                                                            color: #3d3d3d;
                                                            font-size: 36rpx;
                                                            margin-right: 10rpx;
                                                        "
                                                        >{{ item.name }}</text
                                                    >{{ item.type }}
                                                </view>
                                                <u-gap height="10rpx" />
                                                <u-text
                                                    color="#666"
                                                    size="28rpx"
                                                    :text="`联系方式：${
                                                        item.phone || '--'
                                                    }`"
                                                />
                                            </view>
                                        </view>
                                    </view>
                                    <view
                                        style="
                                            margin-top: 20rpx;
                                            text-align: right;
                                        "
                                    >
                                        <u-icon
                                            name="trash"
                                            color="#575B66"
                                            size="28"
                                            @click="deleteFun(item.id)"
                                        />
                                    </view>
                                </view>
                            </view>
                        </view>
                    </u-checkbox-group>
                </view>
            </view>
            <u-modal
                :show="show1"
                ref="editModal"
                title="添加"
                showCancelButton
                @confirm="confirmEdit1"
                @cancel="cancelEdit1"
                confirmText="确定"
                confirmColor="#1682FF"
                cancelText="取消"
            >
                <view slot="default" style="width: 100%">
                    <u--form
                        labelPosition="left"
                        :labelStyle="labelStyle"
                        :model="person"
                        ref="uForm"
                    >
                        <u-form-item
                            label="姓名"
                            prop="person.name"
                            borderBottom
                        >
                            <u--input
                                v-model="person.name"
                                border="none"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="岗位"
                            prop="person.type"
                            borderBottom
                        >
                            <u--input
                                v-model="person.type"
                                border="none"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="电话"
                            prop="person.phone"
                            borderBottom
                        >
                            <u--input
                                v-model="person.phone"
                                border="none"
                            ></u--input>
                        </u-form-item>
                    </u--form>
                </view>
            </u-modal>
            <view class="bottomFrom"
                ><u-button
                    text="提交"
                    shape="circle"
                    :hairline="false"
                    :loading="loading"
                    :customStyle="buttonCustomStyle"
                    @click="goPage"
            /></view>
        </z-paging>
    </view>
</template>

<script>
import {
    meetingServiceStaffList,
    create,
    deletep,
} from "@/api/userManageSalesman.js";
export default {
    data() {
        return {
            checked: [], //时间排序 1 星级排序 2
            MissingAvatar: "/static/img/conference/MissingAvatar.png",
            salesmanId: "",
            orderNum: "",
            total: 0,
            keyword: "",
            dataList: [],
            newCustomerNumList: {},
            show1: false,
            person: { name: "", phone: "", type: "" },
            buttonCustomStyle: {
                color: "#FFF",
                backgroundColor: "#588BF3",
                // marginTop: '80rpx'
            },
            labelStyle: {
                fontSize: "28rpx",
                color: "#3D3D3D",
                width: "200rpx",
            },
            customInputStyle: {
                backgroundColor: "#F3F3F3",
                height: "80rpx",
                borderRadius: "20rpx",
            },
        };
    },
    created() {
        this.checked = uni.getStorageSync("meetingPersonList");
    },
    methods: {
        async deleteFun(id) {
            console.log("index :>> ", id);
            const result = await deletep(id);
            if (result.code === 200) {
                const index = this.checked.indexOf(id);
                if (index != -1) {
                    this.checked.splice(index, 1);
                    uni.setStorageSync("meetingPersonList", this.checked);
                }
                uni.$u.toast("成功");
                this.$refs.paging.reload();
            }
        },
        cancelEdit1() {
            this.show1 = false;
            this.person = { name: "", phone: "", type: "" };
        },
        async confirmEdit1() {
            if (!this.person.name.length)
                return uni.showToast({
                    title: "请填写姓名",
                    icon: "none",
                });
            if (!this.person.type.length)
                return uni.showToast({
                    title: "请填写岗位",
                    icon: "none",
                });
            if (
                !this.person.phone.length ||
                !/^1[34656789]\d{9}$/.test(this.person.phone)
            )
                return uni.showToast({
                    title: "请确认手机号",
                    icon: "none",
                });
            const result = await create(this.person);
            if (result.code === 200) {
                uni.$u.toast("创建成功");
                this.cancelEdit1();
                this.$refs.paging.reload();
            }
        },

        async goPage() {
            console.log("goPagechecked :>> ", this.checked);
            uni.setStorageSync("meetingPersonList", this.checked);
            uni.navigateBack({
                delta: 1,
            });
        },

        async queryList(pageNo, pageSize) {
            const params = {
                pageNum: pageNo,
                pageSize: pageSize,
            };
            const result = await meetingServiceStaffList(params);

            console.log(333, result.data);
            this.$refs.paging.complete(result.data);
            this.total = result.data.total;
        },
        goDetails(e) {
            const data = JSON.stringify(e);
            this.$u.route({
                url: "/pages_my/user_manage/userDetails/index",
                params: {
                    data,
                },
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.signList {
    ::v-deep.u-line {
        height: auto !important;
    }

    position: relative;
}

.u-text.data-v-50004b49 {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    flex: 0 !important;
    width: 100%;
}

.pepole {
    padding: 20rpx 20rpx 0 80rpx;
    width: 694rpx;
    height: 276rpx;
    box-sizing: border-box;
    background: linear-gradient(270deg, #4467d2 0%, #6e8de7 100%);
    background-image: url("@/static/img/conference/usermangebg.png");
    border-radius: 24rpx;
    background-size: cover;
}

.bottom {
    margin-top: 60rpx;
}

.prope_t {
    display: block;
    font-size: 56rpx;
    color: #fff;
}

.prope_tt {
    display: block;
    font-size: 28rpx;
    color: #fff;
    margin: 26rpx 0 0 8rpx;
}

.top {
    background-size: cover;
    background-position-y: bottom;
    padding-top: 30rpx;
}

.search {
    padding: 30rpx 20rpx 24rpx 20rpx;
    background-color: #fff;
    width: 96%;
}

.scrollViews {
    width: 100%;
    padding: 30upx 28upx 0 28upx;
    box-sizing: border-box;
    background: #f7f7f7;
    margin-top: 10rpx;

    .item {
        width: 100%;
        height: auto;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        margin-bottom: 40upx;
        background-color: #fff;

        .topMessage {
            padding: 30upx 20rpx;
            // border-bottom: 1px solid #dddadf;
            text-align: center;
            position: relative;
        }

        .statusBg {
            width: 121rpx;
            height: 40rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #ffffff;
            line-height: 40rpx;
            text-align: center;
            background-size: contain;
        }

        .bottomMessage {
            padding: 20upx;
            box-sizing: border-box;
            background-color: rgba(245, 246, 250, 0.6);
        }

        .timeBox {
            margin-left: 100rpx;
        }
    }
}

/* 其他顾问 */
.else_enterprise {
    // padding: 20rpx 20rpx;

    margin-top: 12rpx;
    padding: 32rpx;
    background: linear-gradient(
        135deg,
        #deebf9 0%,
        rgba(255, 255, 255, 0) 100%
    );

    .list1,
    .list2 {
        width: 134rpx;
        height: 48rpx;
        color: #fff;
        text-align: center;
        line-height: 48rpx;
        background: linear-gradient(90deg, #74adff 0%, #4992fa 100%);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        font-size: 28rpx;
        margin-right: 20rpx;
    }

    .list2 {
        background: linear-gradient(90deg, #58eaf7 0%, #48c4cf 100%);
    }
}

.el_adviser_info_info {
    display: flex;
    align-items: center;
}

.el_adviser_info_img {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    margin: 0 20rpx;
}

button::after {
    border: none;
    border-radius: 0;
}

.adviser_info,
.adviser_else {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    color: #333;
    justify-content: space-between;
}

.adviser_info_img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 16rpx;
}
.tab {
    // padding: 0 90rpx 18rpx;
    flex: 1;
    display: flex;
    justify-content: center;
}
.up {
    font-size: 28rpx;
    color: #588bf3;
    margin-right: 10rpx;
}
.down {
    font-size: 28rpx;
    color: #777777;
    margin-right: 10rpx;
}
.time {
    padding: 18rpx 36rpx;
    display: flex;
}
.u-page__tag-item {
    margin-left: 10rpx;
    margin-top: 20rpx;
}
.fileBox {
    justify-content: flex-end;
    padding-bottom: 30rpx;
}
.bottomFrom {
    padding-left: 40rpx;
    padding-right: 40rpx;
    padding-top: 20rpx;
    box-sizing: border-box;
    margin-top: 40rpx;
    position: fixed;
    bottom: 10rpx;
    width: 100%;
}
</style>
